<template>
  <div class="main">
    <section>
      <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="120px">
        <el-row :gutter="50">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="用户手机号:" prop="mobile">
              <el-input @keyup.enter.native="getList" v-model="listQuery.mobile" placeholder="用户手机号" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" class="btn-item">
          <el-button type="primary" size="mini" icon="el-icon-search" plain @click="getList">搜索</el-button>
          <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
        </el-form-item>
      </el-form>
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="用户名称" prop="realName" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="手机号" prop="mobile" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="用户昵称" prop="nickname" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="上级审批人手机号" prop="approveUserMobile" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="上级审批人昵称" prop="approveUserNickname" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="操作" width="160" v-if="rightsButtons['change']">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="handleChange(scope.row)" v-if="rightsButtons['change']">变更</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <el-dialog title="变更" :visible.sync="changeDialog">
      <el-form :model="formData" ref="formData" :rules="formRules" label-width="170px">
        <el-form-item label="原上级审批人手机号：">
          <span>{{formData.approveUserMobile}}</span>
        </el-form-item>
        <el-form-item label="原上级审批人昵称：">
          <span>{{formData.approveUserNickname}}</span>
        </el-form-item>
        <el-form-item prop="approvalMobile" label="新上级审批人手机号：">
          <el-input v-model="formData.approvalMobile" placeholder="新上级审批人手机号" style="width: 400px;margin-right:10px;"></el-input><el-button type="primary" size="mini" plain @click="seachApproval">搜索</el-button>
        </el-form-item>
        <el-form-item label="新上级审批人昵称：">
          <span>{{formData.approvalNickname}}</span>
        </el-form-item>
        <el-form-item prop="dingDingNo" label="钉钉审批单号：" :rules="commonRules.notNullRule">
          <el-input v-model="formData.dingDingNo" placeholder="钉钉审批单号（限制100个字）" maxlength="100"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="btnLoading" @click="save('formData')">确定</el-button>
        <el-button @click="changeDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {regexp} from '@/utils/tools'
  export default {
    name: 'approvalManage',
    data() {
      return {
        btnLoading: false,
        formData: {
          applyUserId: '',
          approveUserMobile: '',
          approveUserNickname: '',
          approvalMobile: '',
          approvalNickname: '',
          dingDingNo: ''
        },
        formRules: {
          approvalMobile: [
            { required: true, message: '不能为空', trigger: 'change' },
            { pattern: regexp.tel, message: '请输入正确的手机号', trigger: 'change' },
          ]
        },
        changeDialog: false,
        listLoading: false,
        listQuery: {
          mobile: ''
        },
        list: []
      }
    },
    methods: {
      // 清空搜索条件
      resetForm (formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields()
        })
      },
      handleChange (row) {
        if (this.$refs['formData']) {
          this.$nextTick(() => {
            this.$refs['formData'].clearValidate()
          })
        }
        this.formData = {
          applyUserId: row.userId,
          approveUserMobile: row.approveUserMobile,
          approveUserNickname: row.approveUserNickname,
          approvalMobile: '',
          approvalNickname: '',
          dingDingNo: ''
        }
        this.changeDialog = true
      },
      seachApproval () {
        this.request({
          url: '/bsnl-product/box/stock/user/info',
          method: 'get',
          params: { 
            mobile: this.formData.approvalMobile
          }
        }).then((res) => {
          if (res.status === 200) {
            this.formData.approvalNickname = res.data.nickname
          }
        }).catch(err => {
          console.log(err)
        })
      },
      save (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.btnLoading = true
            this.request({
              url: '/bsnl-product/box/stock/apply/parent/change',
              method: 'post',
              data: { 
                approvalMobile: this.formData.approvalMobile,
                dingDingNo: this.formData.dingDingNo,
                applyUserId: this.formData.applyUserId
              }
            }).then((res) => {
              if (res.status === 200) {
                this.btnLoading = false
                this.$message.success(res.message)
                this.changeDialog = false
                this.getList()
              }
            }).catch(err => {
              this.btnLoading = false
              console.log(err)
            })
          }
        })
      },
      // 获取列表
      getList() {
        this.listLoading = true
        this.request({
          url: '/bsnl-product/box/stock/apply/parent',
          method: 'get',
          params: { ...this.listQuery }
        }).then((res) => {
          this.list = [res.data]
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.list = []
          this.listLoading = false
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding: 0 0 10px 15px;
}
</style>